<template>
  <div class="reg_body">
      <van-nav-bar
          title="注册"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="turn()"
      />
      <h1>用户注册</h1>
      <div class="reg_wrap">
         <van-field v-model="userName"  placeholder="请输入用户名" />
        <van-field v-model="phone"  placeholder="请输入手机号" />
        <van-field v-model="email"  placeholder="请输入邮箱" />
        <van-field v-model="userPwd"  placeholder="请输入密码" />
        <van-button type="primary" @click="reg">立即注册</van-button>
      </div>
 
  </div>
</template>
<script>
import {RegApi} from '../api/com'
export default {
  data(){
    return{
      userName:"",
      email:"",
      phone:"",
      userPwd:"",
      nickname:"",
      userPic:""
    }
  },
  methods: {
    turn(){
      this.$router.go(-1)
    },
    // 注册接口
    async reg(){
      var res=await RegApi({
          userName:this.userName,
          email:this.email,
          phone:this.phone,
          userPwd:this.userPwd,
          nickname:"",
          userPic:""
      })
      console.log(res)
      this.userName="";
      this.email=""
      this.phone=""
      this.userPwd=""
      if(res.err){
           this.$message.fail(res.err)
      }else{
         this.$message.success("注册成功")
         this.$router.push("/login");
      }
    }
  },
}
</script>
<style lang="less" scoped>
.reg_body{
  height: 100vh;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F02%2F20181002100242_34w84.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647132947&t=0a067c950df4d333837b3a75e8676b6e);
}
h1{
  line-height: 100px;
  padding-left: 30px;
  box-sizing: border-box;
  color: white;
}
  .reg_wrap {
      height: 300px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .van-cell{
        width: 80%;
        margin: 0 auto;
      }
      .van-button{
        width: 50%;
        margin: 0 auto;
      }
  }
</style>